<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      html,
      body {
        color: #eee;
        background: url(./img/bg.jpg) no-repeat;
        background-size: cover;
      }
      .topbar {
        background-color: #262d49;
        overflow: hidden;
        padding: 15px 0;
        font-size: 16px;
      }
      .logo {
        float: left;
        margin-right: 10px;
      }
      .enterpriseName {
        float: left;
      }
      .sign-in {
        padding-right: 50px;
      }
      .sign-in a {
        display: inline-block;
        color: #eee;
      }
      /* 主体部分 */
      .main {
        padding-top: 30px;
      }
      .level-select {
        width: 80%;
        border: 1px solid #262d49;
        margin: auto;
        border-radius: 10px;
        box-shadow: 2px 2px 10px #262d49;
        background-color: #2a3050;
        padding-bottom: 50px;
      }
      .level-select h3 {
        margin: 0;
        width: 100%;
        height: 60px;
        line-height: 60px;
        background-color: #262d49;
        text-align: center;
        font-size: 20px;
        letter-spacing: 0.3em;
      }
      .level-opation li {
        padding-top: 5px;
        background-color: #2d3858;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        line-height: 40px;
      }
      .level-opation li i {
        padding-left: 10px;
        font-size: 14px;
      }
      .second a {
        display: block;
        color: #eee;
        padding: 3px;
        font-size: 12px;
        background-color: #011715;
        line-height: 25px;
        text-decoration: none;
      }
      .second a:hover {
        background-color: #057e84;
      }
      /* 子菜单高亮 */
      .active-second {
        background-color: #057e84 !important;
      }
    </style>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row topbar">
        <div class="col-md-3 col-xs-3 col-sm-3">
          <div class="logo"><img src="" alt="企业logo" /></div>
          <div class="enterpriseName">企业名称</div>
        </div>
        <div class="col-md-6 col-xs-6 col-sm-6 text-center">
          子长采油厂生产指标完成情况
        </div>
        <div class="col-md-3 col-xs-3 col-sm-3 sign-in text-right">
          <a href="javascript:;">登陆</a> <a href="javascript:;">注册</a>
        </div>
      </div>
    </div>
    <div class="row main">
      <div class="col-md-2 main-left">
        <div class="level-select">
          <h3>级别选择</h3>
          <ul class="level-opation">
            <li>
              采油厂 <i class="glyphicon glyphicon-triangle-bottom"></i>
              <div class="second">
                <a href="javascript:;">采油1</a>
                <a href="javascript:;">采油1</a>
                <a href="javascript:;">采油1</a>
              </div>
            </li>
            <li>
              采油厂 <i class="glyphicon glyphicon-triangle-bottom"></i>
              <div class="second">
                <a href="javascript:;">采油厂2</a>
                <a href="javascript:;">采油厂2</a>
                <a href="javascript:;">采油厂2</a>
              </div>
            </li>
            <li>
              采油队 <i class="glyphicon glyphicon-triangle-bottom"></i>
              <div class="second">
                <a href="javascript:;">采油队3</a
                ><a href="javascript:;">采油队3</a>
                <a href="javascript:;">采油队3</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-md-8">34444</div>
      <div class="col-md-2">37772</div>
    </div>

    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script>
      $(function() {
          $('.second').hide();
          // 一级菜单联动
          $('.level-opation li').each(function(index){
              $(this).click(function(){
                  // 自身切换
                  if($(this).attr('active') == 'true')  {
                      $(this).attr('active','false').find('div').slideUp(150);
                      $(this).find('i').attr('class','glyphicon glyphicon-triangle-bottom');
                      return ;
                      }
                  // 排他切换
                    $(this).attr('active','true').find('div').slideDown(150).end().siblings().attr('active','false').find('div').slideUp(150);
                    $(this).find('i').attr('class','glyphicon glyphicon-triangle-top').end().siblings().find('i').attr('class','glyphicon glyphicon-triangle-bottom');
                // 取消子菜单高亮 
                    $('.level-opation li a').removeClass('active-second')
              })
          });
          // 子菜单高亮
          $('.level-opation li a').each(function(){
              $(this).click(function(e){
                  $(this).addClass('active-second').siblings().removeClass('active-second');
                  e.stopPropagation()
              });
          })
      });
    </script>
  </body>
</html>
